<template>
<div>
    <div class="time">统计时间: {{ time }}</div>
    <div class="statistics">
        <van-row gutter="3" class="title-container">
            <van-col :key="i" v-for="(item,i) in cardList" :span="6">
                <info-card :type="i" :data="item"></info-card>
            </van-col>
            <!--            <van-col span="6">-->
            <!--                <info-card></info-card>-->
            <!--            </van-col>-->
            <!--            <van-col span="6">-->
            <!--                <info-card></info-card>-->
            <!--            </van-col>-->
            <!--            <van-col span="6">-->
            <!--                <info-card></info-card>-->
            <!--            </van-col>-->
        </van-row>
    </div>
</div>
</template>
<script>
    import InfoCard from "./statistics-card";

    export default {
        name: "statistics",
        components: {InfoCard},
        computed: {
            countData() {
                return this.$store.state.countData;
            },
            time() {
                return this.countData.date;
            },
            cardList() {
                return [
                    {
                        add: this.countData.diagnosedIncr,
                        count: this.countData.diagnosed,
                        label: "全国确诊"
                    },
                    {
                        add: this.countData.suspectIncr,
                        count: this.countData.suspect,
                        label: "疑似病例"
                    },
                    {
                        add: this.countData.curedIncr,
                        count: this.countData.cured,
                        label: "治愈人数"
                    },
                    {
                        add: this.countData.deathIncr,
                        count: this.countData.death,
                        label: "死亡人数"
                    },
                    // {
                    //     add: this.countData.seriousIncr,
                    //     count: this.countData.serious,
                    //     label: "重症人数"
                    // }
                ];
            }
        },
        data() {
            return {};
        }
    };
</script>

<style scoped>
    .time{
        font-size: 14px;
        color: #e5e5e5;
        padding-left: 12px;
        margin-bottom: 8px;
    }
    .statistics{
        background: #ffffff;
        border-radius: 8px;
        padding: 20px 10px;
        margin: 0 10px;
        text-align: center;
    }
</style>
